<!--
 * @Author: xurenda <xurenda@qq.com>
 * @HomePage: https://xurenda.top
 * @Github: https://github.com/xurenda
 * @Date: 2019-10-09 22:19:54
 * @LastEditTime: 2019-12-06 22:25:12
 * @FilePath: \elegant-surf\src\App.vue
 -->
<template>
<div id="app">
  <router-view/>

  <!-- 弹出提示信息 -->
  <modal v-if="isModalShow">
    <template #title>欢迎使用 Elegant-surf</template>
    <template #default>
      <p class="message">本网站仅适配较新版本的chrome浏览器，如有功能或样式问题，请更换新版chrome浏览器。</p>
    </template>
    <template #buttons>
      <button @click="isModalShow = false">了解</button>
    </template>
  </modal>
</div>
</template>

<script>
import Modal from '@/components/common/Modal'
import { INIT } from '@/store/mutationsTypes'

export default {
  name: 'app',
  components: { Modal },
  data() {
    return {
      // 是否显示弹出框
      isModalShow: false
    }
  },
  mounted() {
    if (localStorage.getItem('vuex')) return
    this.isModalShow = true
    this.$store.commit(INIT)
  }
}
</script>

<style lang="stylus">
#app
  width 100vw
  height 100vh
  min-width 800px
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  color #2c3e50
</style>
